<template>
  <div class="service">
    <!-- 顶部横幅 -->
    <div class="top-bar">
      <div class="back-btn" @click="goBack">
        <svg viewBox="0 0 24 24" class="icon">
          <path d="M15 18l-6-6 6-6" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
      <div class="title">Customer Service</div>
    </div>

    <iframe v-if="link" :src="link" frameborder="0"></iframe>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { ref } from 'vue'

const router = useRouter()
const route = useRoute()
const defaultUrl = 'https://vm.qomshnax.com/19we7xmvcjv960l7mbf7yw46vk'
const link = ref('')

const rawUrl = route.query.url
link.value = decodeURIComponent(rawUrl || defaultUrl)

const goBack = () => {
  router.back()
}
</script>

<style lang="scss" scoped>
.service {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.top-bar {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}

.back-btn {
  cursor: pointer;
  padding-right: 16px;
  display: flex;
  align-items: center;
}

.icon {
  width: 20px;
  height: 20px;
}

.title {
  flex: 1;
  text-align: center;
  font-weight: bold;
  margin-right: 28px;
}

iframe {
  width: 100%;
  flex: 1;
  border: none;
}
</style>
